<template>
	<view class="employee-page">
		<NavBar title="员工管理"/>
		<view class="user-list flex-column">
			<view class="user-info" v-for="(item, index) in userList" :key="item.id">
				<view class="user-title flex">
					<view class="name-avatar flex">
						<image :src="item.avatar" class="avatar" />
						<view class="user-name"> {{ item.nickname }} </view>
					</view>
					<wd-tag :type="item.status==1?'success':'danger'" mark>
						{{ item.status==1?'启用':'禁用' }}
					</wd-tag>
				</view>
				<view class="mobile"> 联系方式：{{ item.mobile }} </view>
				<view class="user-footer flex">
					<wd-button
						:type="item.status==1?'error':'success'"
						size="small"
						@tap="setStatus(index, item.id, item.status, item.nickname)"
					> {{ item.status==1?'禁用':'启用'}} </wd-button>
					<wd-button size="small" @tap="goSalary(item.id, item.nickname)"> 设置薪资 </wd-button>
				</view>
			</view>
		</view>
		<wd-message-box />
	</view>
</template>

<script setup>
	import { computed, ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue'
	import { useMessage } from '@/uni_modules/wot-design-uni'
	import { emplopyeeListApi, editStatusApi } from '@/api'
	import { useUserStore } from '@/store'
	const message = useMessage()
	const userInfo = computed(() => useUserStore().userInfo)
	const userList = ref([])
	const goSalary =  (id, name) => {
		uni.navigateTo({
			url: `/pages/mine/salary?user_id${id}&name=${name}`
		})
	}
	// 修改状态
	const setStatus = (index, user_id, status, name) => {
		const params = {
			uid: userInfo.value.uid,
			user_id,
			status: status==1?0:1
		}
		message.confirm({title: '提示', msg: `是否修改 ${name} 的状态？`}).then(res => {
			editStatusApi(params).then(res =>{
				userList.value[index].status = params.status
				uni.showToast({
					icon: 'none',
					title: '修改成功'
				})
			}).catch(err =>{
				uni.showToast({
					icon: 'none',
					title: err.msg
				})
			})
		})
	}
	const getUserList = () => {
		emplopyeeListApi({uid: userInfo.value.uid}).then(res => {
			userList.value = res
		})
	}
	onLoad(() => {
		getUserList()
	})
</script>

<style lang="scss" scoped>
	.employee-page {
		padding: 20rpx 24rpx;
		.user-list {
			gap: 30rpx;
			.user-info {
				padding: 20rpx;
				border-radius: 20rpx;
				background-color: #fff;
				.user-title {
					align-items: start;
					justify-content: space-between;
					.name-avatar {
						gap: 20rpx;
						align-items: end;
						.avatar {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
						}
						.user-name {
							margin-bottom: 20rpx;
						}
					}
				}
				.user-footer {
					gap: 30rpx;
					margin-top: 20rpx;
					padding-top: 20rpx;
					justify-content: end;
					border-top: 1px solid #f8f8f8;
				}
			}
		}
	}
</style>
